<template>
    <div class="app-container home">

        <el-card>
            <div slot="header" class="clearfix">
                <span>工作台</span>
            </div>

            <div class="body">
                <div class="userInfo">
                    <img :src="avatar" alt="" srcset="">
                    <div class="info">
                        <div class="roleGroup">{{ roleGroup }}，欢迎回来！</div>
                        <div class="tips">开始您一天的工作吧！</div>
                    </div>
                </div>
                <div class="timeBox">
                    <div class="nowTime"> {{ nowTime }}</div>
                    <div class="nowDate">{{ nowDate }}</div>
                </div>
            </div>

        </el-card>
    </div>
</template>

<script>
import store from "@/store";
import { getUserProfile } from "@/api/system/user";
export default {
    name: "Index",
    data() {
        return {
            avatar: '',
            user: {},
            roleGroup: {},
            nowDate: '',
            nowTime: ''
        };
    },

    created() {
        this.getUser();
        this.nowTimes()
    },
    methods: {
        //显示当前时间（年月日时分秒）
        timeFormate(timeStamp) {
            let year = new Date(timeStamp).getFullYear();
            let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
            let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
            let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
            let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
            let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
            this.nowDate = year + "年" + month + "月" + date + "日"
            this.nowTime = hh + ":" + mm + ':' + ss;
        },
        nowTimes() {
            this.timeFormate(new Date());
            setInterval(this.nowTimes, 1000);
            this.clear()
        },
        clear() {
            clearInterval(this.nowTimes)
            this.nowTimes = null;
        },

        getUser() {
            getUserProfile().then(response => {
                this.user = response.data;
                this.avatar = store.getters.avatar;
                this.roleGroup = response.roleGroup;
            });
        }
    },
}
</script>

<style scoped lang="scss">
.body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userInfo {
    display: flex;
    align-items: center;


    img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .roleGroup {
        font-size: 1.3em;
    }

    .tips {
        color: #999;
        margin-top: 4px;
    }
}

.timeBox {
    padding: 10px;
    background-color: #165Dff;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    .nowTime {
        font-size: 28px;
    }
}
</style>

